<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="" v-cloak>
        <el-form size="mini" label-position="left" label-width="100px" v-loading="loading">
            <div class="inline">
                <el-form-item label="地点名称">
                    <el-input v-model="item.title" style="width: 220px" />
                </el-form-item>

                <el-form-item label="地点地址">
                    <el-input v-model="item.address" style="width: 220px" />
                </el-form-item>

                <el-form-item label="地点类型">
                    <enumeration-selector v-model="item.category" cat="surround_cat" :popperAppendToBody="true" ></enumeration-selector>
                </el-form-item>

                <el-form-item label="地点是否公开">
                    <el-switch v-model="item.is_public" />
                </el-form-item>

                <el-form-item label="地点位置">
                    <el-tag size="mini" v-if="item.lat && item.lng"
                        >已设置（经度: {{ item.lat }}，纬度:
                        {{ item.lng }}）</el-tag
                    >
                    <el-tag size="mini" v-else>未设置</el-tag>
                    <MapMarkerDialogButton @change="markerChange" :lat="lat" :lng="lng"></MapMarkerDialogButton>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="default" @click="cancleHandle" icon="el-icon-close">取消</el-button>
                    <el-button @click="submitHandle" type="primary" size="mini" icon="el-icon-check">确定</el-button>
                </el-form-item>
            </div>
        </el-form>

    </div>
</template>
  
<script>
import { updatePostSurrounds, createPostSurrounds } from "@/api/post-surround";
import ImagePicker from "@/components/ImagePicker";
import PostSelector from "@/components/PostSelector";
import MapMarkerDialogButton from "@/components/MapMarkerDialogButton";

import MapMarker from "@/components/MapMarker";
export default {
    components: { ImagePicker, PostSelector, MapMarker, MapMarkerDialogButton },
    data () {
        return {
            loading: false,
            cats: [{
                value: 'youeryuan',
                name: '幼儿园',
            },
            {
                value: 'xiaoxue',
                name: '小学',
            },
            {
                value: 'zhongxue',
                name: '中学',
            },
            {
                value: 'meishi',
                name: '美食',
            },
            {
                value: 'gouwu',
                name: '购物',
            },
            {
                value: 'gongjiao',
                name: '公交',
            },
            {
                value: 'ditie',
                name: '地铁',
            },
            {
                value: 'yinhang',
                name: '银行',
            },
            ],
        };
    },

    props: {
        item: { type: Object, default: {} },
    },

    watch: {},

    mounted: function () { },

    computed: {
        lng: {
      get() {
        if (!this.item) {
          return 0;
        }
        if (!this.item.lng) {
          return 0;
        }
        return parseFloat(this.item.lng);
      },
      set(val) {
        this.item.lng = val;
      },
    },
    lat: {
      get() {
        if (!this.item) {
          return 0;
        }
        if (!this.item.lat) {
          return 0;
        }
        return parseFloat(this.item.lat);
      },
      set(val) {
        this.item.lat = val;
      },
    },
    },

    methods: {

        markerChange: function (marker) {
            console.log(marker);
            if (!marker) {
                return false;
            }

            // var item = this.item;
            // item.latitude = marker.lat;
            // item.longitude = marker.lng;
            // this.item = item;
            this.$set(this.item, 'lat', marker.lat);
            this.$set(this.item, 'lng', marker.lng);
        },

        cancleHandle: function () {
            var showForm = false;
            this.$emit('quxiao', showForm)
        },

        submitCallback: function (resp) {
            if (!resp) {
                return;
            }
            if (resp.status == 0) {
                var showForm = false;
                this.$emit('quxiao', showForm)
                this.$emit("change", {});
            }
        },

        changeHandle: function (e) {
            // console.log("change handle", e);
            this.item.name = e.name
        },

        validate: function (item) {
            if (!item.title) {
                this.$message.error("地点名称不能为空");
                return false;
            }

            if (!item.address) {
                this.$message.error("地点地址不能为空");
                return false;
            }
            if (!item.category) {
                this.$message.error("请选择地点类型");
                return false;
            }

            // if(!item.lng && !item.lat) {
            //   this.$message.error("请选择地点经纬度");
            //   return false;
            // }
            return true;
        },

        submitHandle: function () {
            // TODO validate
            var item = this.item;
            var isok = this.validate(item);
            if (!isok) {
                return false;
            }
            this.loading = true;
            if (item.id) {
                updatePostSurrounds(item).then((res) => {
                    this.submitCallback(res);
                }).catch((err) => {
                    this.loading = false
                    console.log(err);
                });
                return;
            }
            createPostSurrounds(item).then((res) => {
                this.submitCallback(res);
                return;
            }).catch((err) => {
                this.loading = false
                console.log(err);
            });
        },
    },
};
</script>
  
<style scoped>
.inline {
    /* display: flex;
    justify-content: space-between; */
    margin-top: 20px;
}
</style>
  